<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>图文列表27</title>
   <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
   <link rel="stylesheet" href="../css/public.css">
   <style>
      .imgText_list_twentyseven_main {
         padding-top: 60px;
      }

      .imgText_list_twentyseven_title span:nth-child(1) {
         color: var(--c_theme);
         font-size: var(--f_title);
         line-height: var(--l_title);
      }

      .imgText_list_twentyseven_title span:nth-child(2) {
         color: var(--c_text);
         font-size: var(--f_text);
         line-height: var(--l_text);
      }

      .imgText_list_twentyseven_title p {
         padding-top: 22px;
         color: var(--c_subtitle);
         font-size: var(--f_text);
         line-height: var(--l_text);
      }

      .imgText_list_twentyseven_list li {
         padding: 0;
      }

      .imgText_list_twentyseven_list li:nth-child(1) {
         padding-right: 10px;
      }

      .imgText_list_twentyseven_list li:nth-child(2) {
         padding: 0 5px;
      }

      .imgText_list_twentyseven_list li:nth-child(3) {
         padding-left: 10px;
      }

      .imgText_list_twentyseven_list_img {
         width: 100%;
         height: 500px;
      }

      .imgText_list_twentyseven_list_img img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }

      .imgText_list_twentyseven_list_text p {
         padding-top: 16px;
         color: var(--c_theme);
         font-size: var(--f_text);
         line-height: var(--l_text);
      }

      .imgText_list_twentyseven_list_text span {
         color: var(--c_subtitle);
         font-size: var(--f_describe);
         line-height: var(--l_describe);
      }

      @media (max-width:768px) {
         .imgText_list_twentyseven_main {
            padding-top: 30px;
         }
         
         .imgText_list_twentyseven_list li:nth-child(1) {
            padding-right: 10px;
         }

         .imgText_list_twentyseven_list li:nth-child(2) {
            padding-left: 10px;
         }

         .imgText_list_twentyseven_list li:nth-child(3) {
            padding: 20px 0 0 0;
         }

         .imgText_list_twentyseven_list_img {
            height: 191px;
         }

         .imgText_list_twentyseven_list li:nth-child(3) .imgText_list_twentyseven_list_img {
            height: 383px;
         }
      }
   </style>
</head>

<body>
   <div class="imgText_list_twentyseven modular">
      <div class="public_width">
         <div class="imgText_list_twentyseven_content">
            <div class="imgText_list_twentyseven_title">
               <span>案例展示/</span><span>Case presentation</span>
               <p>景观设计是建设单位和设计者的意图、理念、风格及智慧在图纸上的表现，而景观施工就是把这一切在实地真实的展现出来，这是景观工程的建设过程中非常重要的一个环节。</p>
            </div>

            <div class="imgText_list_twentyseven_main">
               <ul class="imgText_list_twentyseven_list row">
                  <li class="col-xl-4 col-6">
                     <div class="imgText_list_twentyseven_list_img">
                        <img src="../images/img_collection_5_1.png" alt="">
                     </div>
                     <div class="imgText_list_twentyseven_list_text">
                        <p>庭院景观</p>
                        <span>COURTYARD LANDSCAPE</span>
                     </div>
                  </li>

                  <li class="col-xl-4 col-6">
                     <div class="imgText_list_twentyseven_list_img">
                        <img src="../images/img_collection_5_2.png" alt="">
                     </div>
                     <div class="imgText_list_twentyseven_list_text">
                        <p>庭院景观</p>
                        <span>COURTYARD LANDSCAPE</span>
                     </div>
                  </li>

                  <li class="col-xl-4 col-12">
                     <div class="imgText_list_twentyseven_list_img">
                        <img src="../images/img_text_list_1.png.webp" alt="">
                     </div>
                     <div class="imgText_list_twentyseven_list_text">
                        <p>庭院景观</p>
                        <span>COURTYARD LANDSCAPE</span>
                     </div>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</body>
</html>